Impara JavaScript in 10 minuti

1 September 2025 — Linguaggio Di Programmazione

JavaScript è un linguaggio di programmazione interpretato di alto livello noto per la sua versatilità e l’uso diffuso nello sviluppo web. Questo tutorial copre le funzionalità moderne di JavaScript (ES6+) per aiutarti a imparare rapidamente il linguaggio.

1. Scrivere il tuo primo programma JavaScript

Iniziamo con un programma semplice. Crea un file chiamato hello.js e inserisci il seguente codice:

console.log("Hello, World!");

Salva il file ed esegui il seguente comando nel terminale o nella riga di comando:

node hello.js

O includilo in un file HTML:

<script>
  console.log("Hello, World!");
</script>

L’output sarà:

Hello, World!

Questo semplice programma dimostra la funzionalità di output di base di JavaScript. La funzione console.log() viene utilizzata per visualizzare informazioni di testo nella console.

2. Sintassi di base

La sintassi di JavaScript è simile ad altri linguaggi in stile C. Utilizza punti e virgola per terminare le istruzioni e parentesi graffe {} per definire blocchi di codice.

// Questo è un commento su una riga
console.log("Hello, World!");

/*
Questo è un commento
multi-riga che si estende
su più righe.
*/

Regole di sintassi di base in JavaScript:

Punti e virgola: Opzionali ma consigliati per terminare le istruzioni
Commenti: I commenti su una riga iniziano con //, quelli multi-riga con /* */
Sensibilità alle maiuscole: JavaScript è case-sensitive
Blocchi di codice: Definiti da parentesi graffe {}

3. Variabili e tipi di dati

In JavaScript, le variabili vengono dichiarate utilizzando let, const o var. JavaScript moderno preferisce let e const.

Dichiarazione di variabili:

let name = "John"; // Variabile mutabile
const age = 25;     // Costante immutabile
var oldWay = "deprecated"; // Evita di usare var

Principali tipi di dati in JavaScript:

Number: 42, 3.14, -10
String: "hello", 'world', `template`
Boolean: true, false
Undefined: undefined (variabile dichiarata ma non assegnata)
Null: null (assenza intenzionale di valore)
Object: {key: "value"}, [1, 2, 3]
Symbol: Symbol("description") (ES6+)
BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Tipo Number

JavaScript utilizza numeri in virgola mobile a 64 bit per tutti i valori numerici.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 Tipo String

Le stringhe possono essere create con apici singoli, apici doppi o template literal.

let single = 'Stringa con apici singoli';
let double = "Stringa con apici doppi";
let template = `Template literal`;

// Template literal con interpolazione
let name = "Alice";
let greeting = `Ciao, ${name}!`; // "Ciao, Alice!"

Operazioni sulle stringhe:

let text = "Programmazione JavaScript";
console.log(text.length);        // Lunghezza stringa: 21
console.log(text.toUpperCase()); // "PROGRAMMAZIONE JAVASCRIPT"
console.log(text.toLowerCase()); // "programmazione javascript"
console.log(text[0]);            // Primo carattere: "P"
console.log(text.slice(0, 10)); // "Programmaz"

3.3 Tipo Boolean

Il tipo boolean ha due valori: true e false.

let isActive = true;
let isComplete = false;

// Operazioni booleane
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined e Null

undefined significa che una variabile è stata dichiarata ma non è stato assegnato alcun valore. null è un’assenza intenzionale di qualsiasi valore.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("Variabile non definita");
}

if (empty === null) {
  console.log("Valore nullo");
}

4. Strutture dati

4.1 Array

Gli array sono collezioni ordinate e mutabili di valori.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // Aggiungi elemento: [1, 2, 3, 4, 5, 6]
numbers.pop();          // Rimuovi ultimo: [1, 2, 3, 4, 5]
numbers.unshift(0);     // Aggiungi all'inizio: [0, 1, 2, 3, 4, 5]
numbers.shift();        // Rimuovi primo: [1, 2, 3, 4, 5]
numbers[0] = 10;        // Modifica: [10, 2, 3, 4, 5]

Metodi degli array:

let fruits = ["mela", "banana", "arancia"];

// Iterazione
fruits.forEach(fruit => console.log(fruit));

// Trasformazione
let lengths = fruits.map(fruit => fruit.length); // [4, 6, 6]

## 4.2 Object

Gli oggetti sono collezioni di coppie chiave-valore.

```javascript
let person = {
  name: "John",
  age: 30,
  city: "New York",
  isStudent: false
};

// Accesso alle proprietà
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// Aggiunta proprietà
person.country = "USA";
person["occupation"] = "Sviluppatore";

// Rimozione proprietà
delete person.isStudent;

// Metodi degli oggetti
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "New York", "USA", "Sviluppatore"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

I set sono collezioni di valori unici.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Operazioni sui set
numbers.add(6);       // Aggiungi valore
numbers.delete(1);    // Rimuovi valore
numbers.has(2);       // true
numbers.size;         // 5

// Iterazione
numbers.forEach(num => console.log(num));

4.4 Map

Le mappe sono collezioni di coppie chiave-valore con qualsiasi tipo di dati come chiave.

let map = new Map();
map.set("name", "Alice");
map.set(1, "numero uno");
map.set(true, "booleano vero");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// Iterazione
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. Operatori

JavaScript fornisce vari operatori per calcoli e confronti.

Aritmetici: +, -, *, /, %, ** (elevamento a potenza)
Confronto: ==, ===, !=, !==, >, <, >=, <=
Logici: &&, ||, !
Assegnazione: =, +=, -=, *=, /=, %=
Ternario: condition ? expr1 : expr2

5.1 Operatori aritmetici

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 Operatori di confronto

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (uguaglianza stretta)
console.log(x != y);    // true
console.log(x !== y);   // true (disuguaglianza stretta)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 Operatori logici

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. Controllo del flusso

6.1 Istruzioni if

let age = 20;

if (age >= 18) {
  console.log("Adulto");
} else if (age >= 13) {
  console.log("Adolescente");
} else {
  console.log("Bambino");
}

6.2 Istruzione switch

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Inizio settimana");
    break;
  case "Friday":
    console.log("Quasi weekend");
    break;
  default:
    console.log("Giorno normale");
}

6.3 Cicli for

// Ciclo for tradizionale
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Ciclo for...of (array, stringhe)
let fruits = ["mela", "banana", "arancia"];
for (let fruit of fruits) {
  console.log(fruit);
}

// Ciclo for...in (proprietà oggetto)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 Cicli while

// Ciclo while
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// Ciclo do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break e continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Esci dal ciclo
  }
  if (i % 2 === 0) {
    continue; // Salta i numeri pari
  }
  console.log(i); // 1, 3
}

7. Funzioni

Le funzioni sono blocchi di codice riutilizzabili.

7.1 Dichiarazione di funzione

function greet(name) {
  return `Ciao, ${name}!`;
}

console.log(greet("Alice")); // "Ciao, Alice!"

7.2 Espressioni di funzione

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 Funzioni freccia (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `Ciao, ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "Ciao, Bob!"

7.4 Parametri predefiniti

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 Parametri rest

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 Operatore spread

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "New York"}; // {name: "John", age: 30, city: "New York"}

8. Classi e oggetti (ES6+)

8.1 Dichiarazione di classe

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Sono ${this.name}, ${this.age} anni`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} ha compiuto gli anni, ora ${this.age} anni`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "Sono John, 25 anni"
console.log(person.haveBirthday());   // "John ha compiuto gli anni, ora 26 anni"

8.2 Ereditarietà

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} fa un suono`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "Cane");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} abbaia`;
  }

  fetch() {
    return `${this.name} riporta la palla`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy abbaia"
console.log(dog.fetch());     // "Buddy riporta la palla"

8.3 Getter e Setter

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. JavaScript asincrono

9.1 Callback

function fetchData(callback) {
  setTimeout(() => {
    callback("Dati ricevuti");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Dati ricevuti" dopo 1 secondo
});

9.2 Promise

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dati ricevuti");
      // reject("Errore verificato");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "Dati ricevuti"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "Dati ricevuti"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Errore:', error);
  }
}

10. Gestione degli errori

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("Divisione per zero");
  }
  console.log(result);
} catch (error) {
  console.error("Errore:", error.message);
} finally {
  console.log("Questo viene sempre eseguito");
}

11. Moduli (ES6+)

11.1 Esportazione

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 Importazione

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. Funzionalità moderne di JavaScript

12.1 Destrutturazione

// Destrutturazione array
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// Destrutturazione oggetto
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// Destrutturazione parametri funzione
function greet({name, age}) {
  return `Ciao ${name}, hai ${age} anni`;
}

12.2 Template literal

let name = "Alice";
let age = 25;

// Interpolazione base
let greeting = `Ciao, ${name}!`;

// Stringhe multi-riga
let message = `
  Nome: ${name}
  Età: ${age}
  Stato: ${age >= 18 ? "Adulto" : "Minorenne"}
`;

// Valutazione espressione
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 Optional chaining (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "New York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "New York"
console.log(user?.employment?.company);     // undefined (nessun errore)

12.4 Nullish coalescing (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "Sconosciuto");    // "Sconosciuto" (stringa vuota è falsy)
console.log(name ?? "Sconosciuto");    // "" (solo null/undefined)

console.log(age || 18);           // 18 (0 è falsy)
console.log(age ?? 18);           // 0 (solo null/undefined)

console.log(city ?? "Sconosciuto");   // "Sconosciuto"
console.log(country ?? "USA");    // "USA"

13. Metodi utili degli array

let numbers = [1, 2, 3, 4, 5];

// map: trasformare ogni elemento
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: selezionare elementi
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: accumulare valori
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: trovare primo elemento corrispondente
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: verificare se qualche elemento corrisponde
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: verificare se tutti gli elementi corrispondono
let allPositive = numbers.every(n => n > 0); // true

// sort: ordinare elementi
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. Data e ora

let now = new Date();
console.log(now.toString());      // Data e ora corrente
console.log(now.getFullYear());   // Anno corrente
console.log(now.getMonth());      // Mese corrente (0-11)
console.log(now.getDate());       // Giorno corrente (1-31)
console.log(now.getHours());      // Ora corrente (0-23)

// Formattazione date
console.log(now.toLocaleDateString()); // Stringa data localizzata
console.log(now.toLocaleTimeString()); // Stringa ora localizzata
console.log(now.toISOString());        // Stringa formato ISO

// Creazione date specifiche
let specificDate = new Date(2025, 0, 1); // 1 gennaio 2025
let timestamp = new Date(1640995200000); // Da timestamp

15. Espressioni regolari

let text = "Ciao, la mia email è [email protected] e il telefono è 123-456-7890";

// Pattern email
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// Pattern telefono
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// Metodo test
let isValidEmail = emailPattern.test("[email protected]"); // true

// Metodo replace
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript è un linguaggio potente e versatile che continua a evolversi. Questo tutorial copre i concetti essenziali per iniziare, ma c’è molto altro da esplorare, inclusi argomenti avanzati come generatori, proxy e API web.